function $(id){
    return document.getElementById(id);
}
window.onload=function (){
    fullTable(book);
    // let trArray=$("data").getElementsByTagName("tr");
    // for (let i=0;i<trArray.length;i++){
    //     trArray[i].onclick=function (){
    //         showExplain(this);
    //     }
    // }
}

/**
 * 填充HTML表格的数据
 * @param array 填充数据数组
 */
function fullTable(array){
    let str="";
    array.forEach(b =>
    {
        str+=`<tr onclick="showExplain(${b.code},this)"><td>${b.name}</td><td>${b.author}
            </td><td> $: ${b.price} </td></tr>`;
    });
    $("data").innerHTML=str;
}
let colorTr=null;

/**
 * 在右边展示描述信息
 * @param bookCode 图书编号
 * @param book 图书对象
 */
function showExplain(bookCode,bookObject){
    if (colorTr!=null){
        colorTr.style.backgroundColor="white";
    }

    let bookObj= book.find(b => b.code==bookCode);
    bookObject.style.backgroundColor="#555555";
    colorTr=bookObject;
    fullExplain(bookObj);
    $("rightExplain").style.display="flex";
}
function fullExplain(obj){
    let str= `<tr><th>图书名：${obj.name}</th></tr><tr><td>作者：${obj.author}</td></tr>
            <tr><td>售价: ${obj.price}</td></tr><tr><td>出版时间 :2013-09-11</td></tr>
            <tr><td><input type="button" value="加入购物车" onclick="buy(${obj.code})"></td></tr>`;
    $("bookExplain").innerHTML=str;
    $("picture").src=obj.photo;
}

/**
 * 图书搜索功能
 */
function searchBook(){
    let searchArray= book.filter(b=> b.name.indexOf($("search").value)!==-1);
    fullTable(searchArray);
}
function buy(bookID){
    let shopDiv=$("shop");
    shopDiv.style.width=document.documentElement.clientWidth+"px";
    shopDiv.style.height=document.documentElement.clientHeight+"px";
    shopDiv.style.visibility="visible";
    //根据商品得到id
    let bookObj=shopList.find(b=> b.book.code===bookID);
    if (bookObj==null){//如果购物车中不存在
        //在书籍列表找到这本书的对象
        bookObj=book.find(b=> b.code===bookID);
        // alert(bookID+"  "+bookObj);
        //创建购物车购买对象
        let shopObj = {book:bookObj,num:1};
        //在购物集合中加入这本书籍
        shopList.push(shopObj);
    }else{
        bookObj.num++;
    }
    fullShop();
}
function  fullShop(){
    let str="";
    let totalPrice=0;
    shopList.forEach(b=>{
        str+=`<tr><td>${b.book.name}</td><td>${b.book.price}</td>
        <td><input type="number" value="${b.num}" onblur="changeNum(this,${b.book.code})"></td>
        <td>${b.num*b.book.price}</td><td>
            <input type="button" value="移除商品" onclick="delShop(${b.book.code})"></td></tr>`;
        totalPrice+=b.num*b.book.price;
    });
    $("shopData").innerHTML=str;
    $("total").innerHTML=totalPrice;

}

/**
 * 删除购买的书籍
 * @param bookID 书籍的ID
 */
function delShop(bookID){
        let index = shopList.findIndex(b=> b.book.code==bookID);
        //cong数组中删除这个对象
        shopList.splice(index,1);
        fullShop();
}

/**
 * 修改数量
 * @param txtObj
 * @param bookOD
 */
function changeNum(txtObj,bookID){

    if (txtObj.value.length===0 || txtObj.value<1){
        txtObj.value=1;
    }
    //根据书籍id得到书籍对象
    let book = shopList.find(b=>b.book.code ===bookID);
    book.num=parseInt(txtObj.value);
    fullShop();

}